<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('停车费缴纳信息')" />
    <style>
        h5{
            width: 160px;
            display: inline;
        }
        .form-select{
            width: 100px;
            display: inline;
        }
        .container{
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
<h3 class="text-center">停车费缴纳信息</h3><br/>
<div class="container">
    <div class="text-center">
        <h5>年份</h5>&nbsp;&nbsp;
        <select class="form-select" aria-label="Default select example" id="year">
            <option selected>全部</option>
            <option value="1">2018</option>
            <option value="2">2019</option>
            <option value="3">2020</option>
            <option value="4">2021</option>
            <option value="5">2022</option>
        </select>&nbsp;&nbsp;
        <h5>月份</h5>&nbsp;&nbsp;
        <select class="form-select" aria-label="Default select example" id="month">
            <option selected>全部</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>&nbsp;&nbsp;
        <h5>是否已缴费</h5>&nbsp;&nbsp;
        <select class="form-select" aria-label="Default select example" id="whether">
            <option selected>全部</option>
            <option value="1">是</option>
            <option value="2">否</option>
        </select>&nbsp;&nbsp;
        <button type="button" class="btn btn-primary" onclick="clickConfirm()">确认</button>
    </div><br/>

    <table class="table table-hover align-middle">
        <thead style="background-color: azure">
        <tr>
            <th scope="col">停车位编号</th>
            <th scope="col">年份</th>
            <th scope="col">月份</th>
            <th scope="col">停车费用</th>
            <th scope="col">是否已缴费</th>
            <th scope="col">缴费日期</th>
            <th scope="col">缴费人</th>
            <th scope="col">缴费单号</th>
        </tr>
        </thead>
        <tbody id="tbody">
        <tr th:each="parkingFee:${parkingFees}">
            <td th:text="${parkingFee.getParkingNo().trim()}"></td>
            <td th:text="${parkingFee.getYear().trim()}"></td>
            <td th:text="${parkingFee.getMonth().trim()}"></td>
            <td th:text="${parkingFee.getParkingFee().trim()}"></td>
            <td th:text="${parkingFee.getWhether().trim()}"></td>
            <td th:text="${parkingFee.getFeeDate().trim()}"></td>
            <td th:text="${parkingFee.getPeoName().trim()}"></td>
            <td th:text="${parkingFee.getOdd().trim()}"></td>
        </tr>
        </tbody>
    </table>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script>
    clickConfirm = function (){
        console.log("hellow world")
        $.get("/queryInfo/parkingPayInfo/condition",
            {
                year:$("#year option:selected").text(),
                month:$("#month option:selected").text(),
                whether:$("#whether option:selected").text()
            },
            function (data,status){
                $("#tbody").empty();//清空表格
                $.each(data,function (i) {
                    let  tbody = "<tr><td>"+data[i].parkingNo.trim()+"</td>"
                        +"<td>"+data[i].year.trim()+"</td>"
                        +"<td>"+data[i].month.trim()+"</td>"
                        +"<td>"+data[i].parkingFee.trim()+"</td>"
                        +"<td>"+data[i].whether.trim()+"</td>"
                        +"<td>"+data[i].feeDate.trim()+"</td>"
                        +"<td>"+data[i].peoName.trim()+"</td>"
                        +"<td>"+data[i].odd.trim()+"</td></tr>";
                    $("#tbody").append(tbody);
                })
            })
    }
</script>
</body>
</html>